<template>
	<view class="item">
		<image :src="item_src" mode="aspectFit"></image>
		<text style="margin-top: 40rpx; font-size: 24rpx; text-align: center; display: block; margin: auto; ">{{item_title}}</text>
		<view class="item-info">
			<text style="color: #0aa1ed; padding: 5rpx;">{{item_subtitle}}</text>
			<button type="primary" @click="godetail(item_pid)">{{item_buttonText}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"index-list-item",
		props:{
			item_pid:{
				type:String,
				default:''
			},
			item_src:{
				type:String,
				default:'',
			},
			item_title:{
				type:String,
				default:'标题'
			},
			item_subtitle:{
				type:String,
				default:'副标题'
			},
			item_buttonText:{
				type:String,
				default:'按钮标题'
			}
			
		},
		data() {
			return {
				
			};
		},
		methods:{
			godetail(pid){
				
				uni.navigateTo({
					url:'../../pages/product-details/product-details?pid='+pid
				 })
			}
		}
	}
</script>

<style lang="scss">
.item{
	margin:10rpx 0;
	box-shadow: 0px 0px 5px #AAAAAA;
	border-radius: 8rpx;
	image{
		margin: 10rpx 0;
		display: inline-block;
		width: 360rpx;
		height: 200rpx;
	}
	.item-info{
		padding: 10rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 24rpx;
		button{
			margin: 0;
			padding: 10rpx 15rpx;
			display: inline-block;
			background-color: #0aa1ed;
			font-size: 24rpx;
			line-height: 40rpx;
			
		}
	}
}
</style>
